Cart and Checkout

Manage your shopping cart, adjust quantities, and complete your purchase in Iquea Commerce

Overview

The shopping cart allows you to collect products, manage quantities, and proceed to checkout. Your cart is persisted in browser storage so items remain even after closing the browser.

You must be logged in to access cart functionality. Unauthenticated users will be redirected to the login page.

Adding Items to Cart

From Product Detail Page

Add products to your cart from the product detail page:

1. Navigate to Product

   Click on any product from the catalog or featured section to view its details

2. Verify Authentication

   Ensure you’re logged in. If not, you’ll see:

   • Message: “Inicia sesión para comprar este producto”
   • Button: “Iniciar Sesión para Comprar”
3. Check Stock Availability

   Verify the product is in stock:

   • Available: Shows stock count (e.g., “5 unidades”)
   • Out of Stock: Shows “Agotado” in red - cannot be added
4. Select Quantity

   Use the quantity input field to choose how many items to add:

   • Minimum: 1 unit
   • Maximum: Up to available stock
   • Controlled by a number input spinner
5. Add to Cart

   Click the “Añadir al Carrito” button:

   • Button text changes to “¡Añadido!” briefly
   • Product is added to your cart with the specified quantity

Cart Context and Persistence

The cart uses React Context for state management with these features:

• localStorage Persistence: Cart data is saved to browser storage
• Auto-sync: Changes sync automatically between browser tabs
• Session Recovery: Cart contents persist across browser sessions

If you add a product that’s already in your cart, the quantities are combined rather than creating duplicate entries.

Viewing Your Cart

Access your cart from the navigation menu:

1. Open Cart Page

   Click on the Cart icon or link in the main navigation

2. Authentication Check

   If not logged in, you’ll be automatically redirected to /login

3. View Cart Contents

   The cart page displays:

   • List of all items in your cart
   • Product images and names
   • Category labels
   • Individual item prices
   • Quantity controls
   • Line totals (price × quantity)

Empty Cart State

If your cart is empty, you’ll see:

• Message: “Tu carrito está vacío”
• Button: “Ver Productos” - redirects to the product catalog

Managing Cart Contents

Updating Quantities

Adjust the quantity of items already in your cart:

1. Locate Quantity Controls

   Each cart item has + and - buttons with the current quantity displayed between them

2. Increase Quantity

   Click the + button to add one more unit

3. Decrease Quantity

   Click the - button to remove one unit:

   • If quantity reaches 0, the item is removed from the cart
4. View Updated Total

   The line total and cart total update automatically

The system does not enforce stock limits when updating cart quantities. Ensure you don’t exceed available stock to avoid issues during checkout.

Removing Items

Delete individual items from your cart:

1. Click Remove Button

   Each cart item has an “Eliminar” button

2. Confirm Removal

   A confirmation dialog appears: “¿Seguro que quieres eliminar este producto?”

3. Confirm or Cancel

   • Click OK to remove the item
   • Click Cancel to keep the item

Clearing the Entire Cart

The cart is automatically cleared when you complete checkout. You can also manually clear it by:

• Removing items one by one
• Completing the checkout process

Order Summary

The cart page includes a “Resumen del Pedido” (Order Summary) panel on the right side:

Summary Components

Subtotal

Sum of all item prices × quantities before shipping and taxes

Envío

Shipping cost - currently “Gratis” (Free) for all orders

Total

Final amount to be charged, displayed prominently in euros (€)

Price Calculations

The cart automatically calculates:

// Line total per item
lineTotal = productPrice × quantity

// Cart subtotal
subtotal = sum of all line totals

// Total (with free shipping)
total = subtotal + 0

All prices are formatted with two decimal places and displayed in euros (€).

Checkout Process

Completing Your Purchase

Finalize your order from the cart page:

1. Review Cart Contents

   Verify all items, quantities, and prices are correct

2. Check Order Summary

   Review the subtotal, shipping (free), and total amount

3. Click Checkout Button

   Click “Tramitar Pedido” at the bottom of the order summary

4. Order Confirmation

   A mock confirmation appears: “¡Gracias por tu compra! (Funcionalidad de pago mock)”

5. Cart Cleared

   Your cart is automatically emptied after checkout

6. Redirect to Homepage

   You’re redirected to the homepage (/)

The current checkout is a mock implementation. In production, this would integrate with a payment gateway and create actual orders in the system.

Stock Validation

Client-Side Validation

The product detail page enforces stock limits:

• Quantity input has max attribute set to available stock
• Cannot select quantity higher than producto.stock

Out of Stock Products

When viewing a product with stock: 0:

• “Agotado” message displayed in red
• Quantity selector is hidden
• “Añadir al Carrito” button is hidden
• Only login redirect shown (if not authenticated)

Stock validation currently happens client-side. The backend should also validate stock availability when orders are processed.

Cart State Management

The CartContext provides these functions:

Available Functions

Function	Description	Parameters
addToCart	Add product to cart or increase quantity	product: Producto, quantity: number
removeFromCart	Remove item completely from cart	productId: number
updateQuantity	Change quantity of existing item	productId: number, quantity: number
clearCart	Empty entire cart	None

Cart Properties

Property	Type	Description
cart	CartItem[]	Array of cart items
total	number	Total price of all items
count	number	Total number of items (sum of quantities)

Best Practices

Verify Stock Before Checkout

Always check product detail pages for current stock levels before completing large orders.

Save Your Cart

Your cart persists in browser storage, but clear browser data will erase it. Complete purchases promptly.

Review Before Checkout

Double-check quantities and items in the order summary before clicking “Tramitar Pedido”.

Authentication Required

Log in before shopping to ensure seamless cart access and checkout.

Troubleshooting

Cart Not Persisting

Problem: Cart empties when closing browser

Solution: Check browser settings - localStorage must be enabled

Cannot Add to Cart

Problem: Add to cart button not working

Solutions:

• Verify you’re logged in
• Check product has available stock
• Ensure quantity is within stock limits

Redirect to Login

Problem: Automatically redirected when accessing cart

Solution: This is expected behavior - log in to access cart functionality

Related Guides

• Shopping Guide - Browse and search products
• Order Management - View order history and status
• Admin Panel - Admin order management